<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			input {
				display: inline-block;
				border-radius:8px;
				border: 1px solid black;
				outline: none;
				padding: 0px 5px;
				height: 20px;
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			{{hh}}时{{mm}}分
			<br>
			<input type="number" min="0" v-model:value="gethh" ref="hhs" @keyup.enter="cal()" />小时
			<input type="number" max="59" min="0" v-model:value="getmm" ref="mms" @keyup.enter="cal()" />分
			<br>
			<button type="button" style="margin: 10px 0px;" v-on:click="cal">计算</button>
			<br>
			<p>{{msg}}</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var date = new Date();
	var vm = new Vue({
		el: "#app",
		data: {
			hh: date.getHours(),
			mm: date.getMinutes(),
			gethh: 0,
			getmm: 0,
			msg: null
		},
		methods: {
			cal: function() {
				var hh = this.hh,
					mm = this.mm,
					gethh = this.gethh,
					getmm = this.getmm,
					str = "",
					sumhh, summm;
				if (gethh < 0) {
					alert("请输入正确的小时数")
					this.$refs.hhs.focus();
				}
				if (getmm > 59) {
					alert("请输入正确的分钟数")
					this.$refs.mms.focus();
				}
				sumhh = parseInt(hh) + parseInt(gethh);
				summm = parseInt(mm) + parseInt(getmm);
				if (summm > 59) {
					sumhh++;
					summm -= 60;
				}
				str += parseInt(sumhh/24)+"天后"+sumhh%24 + "时" + summm + "分";
				this.msg = str;
			}
		}
	})
</script>
